<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Alert type="info" show-icon>实际效果只在预览和发布状态下显示</Alert>

        <Form :label-width="100">
          <FormItem label="显示导航按钮">
            <i-switch size="small" v-model="option.showNavigation"></i-switch>
          </FormItem>
          <!--<FormItem label="切换速度">
            <InputNumber size="small" :max="1000000" :min="100" :step="100" v-model="option.speed" :active-change="false"></InputNumber> 毫秒
          </FormItem>-->
          <FormItemPanel title="自动轮播">
            <FormItem label="开启">
              <i-switch size="small" v-model="option.autoplay.open"></i-switch>
            </FormItem>
            <FormItem label="切换时间间隔">
              <InputNumber size="small" :max="1000000" :min="0" :step="10" v-model="option.autoplay.delay" :active-change="false"></InputNumber> 秒
            </FormItem>
          </FormItemPanel>
        </Form>

        <FormItemPanel title="被轮播组件列表">
          <Alert type="warning" show-icon style="padding-right: 8px; text-align: justify;">
            被轮播的组件，建议不要在任何交互脚本中使用findCompVmById函数，轮播对象建议以纯展示目的的组件为目标对象
          </Alert>
          <Button size="small" type="default" @click="openWaitingTargetDrawer">选择目标组件</Button>
          <Button size="small" type="default" @click="carouselCompList = []">清空选中</Button>
          <div class="m-b-5px"></div>
          <draggable
              :list="carouselCompList"
              :disabled="false">
            <div class="carousel-comp-list-item" v-for="(cc, index) in carouselCompList" :key="index">
              {{index+1}}、{{cc.layoutItemName}}
            </div>
          </draggable>
        </FormItemPanel>

      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

    <Drawer title="选择目标组件"
            :width="330"
            placement="right"
            :closable="true"
            :mask-closable="false"
            :draggable="false"
            transfer
            v-model="waitingTargetDrawerVisible"
            @on-close="waitingTargetDrawerCloseHandler"
            :styles="$PnUtil.buildDrawerStyleByHasFooter()">
      <div class="m-b-10px">
        <Input v-model="searchValue" search enter-button clearable placeholder="输入名称或ID搜索"
               @on-search="searchWaitingTarget" @on-clear="searchWaitingTarget"/>
      </div>
      <div class="waiting-target-panel"
           :class="{
            'dashed-panel': !item.componentId && item.type != 'groupItem',
            'layout-item-panel': item.type == 'layoutItem',
            'layout-item-active': item.type == 'layoutItem' && item.active
           }"
           v-for="(item, index) in waitingTarget" :key="index"
           v-show="item.show"
           @mouseenter="itemMouseenterHandle(item)"
           @mouseleave="itemMouseleaveHandle"
           @click.stop="item.active = !item.active">
        <div class="float-left">
          {{item.name}}<br/>ID【{{item.id}}】
        </div>
        <div class="clearfix"></div>
      </div>
      <DrawerFooter>
        <Button class="m-r-5px" type="default" @click="closeWaitingTargetDrawer">关闭</Button>
        <Button class="m-r-5px" type="default" @click="clearWaitingTargetSelected"><Icon type="md-close" /> 清空选中</Button>
        <Button type="primary" @click="submitWaitingTargetSelected"><Icon type="md-checkmark" /> 提交选中</Button>
      </DrawerFooter>
    </Drawer>

  </div>
</template>

<script>

  import draggable from "vuedraggable";
  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ComponentCarouselCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    components: {
      draggable
    },
    data() {
      return {
        waitingTarget: [], // 备选目标
        waitingTargetDrawerVisible: false,
        searchValue: ''
      }
    },
    mounted() {

    },
    methods: {
      loadWaitingTarget () {
        this.waitingTarget = [];
        let allCompinfoObj = JSON.parse(localStorage.getItem('allCompinfoObj'));
        let layoutItems = this.$PnUtil.deepClone(this.$store.getters['designer/getLayoutItems'])
        for (let i=0; i<layoutItems.length; i++) {
          if (this.currentLayoutItemId != layoutItems[i].id) {
            this.waitingTarget.push({
              type: 'layoutItem',
              id: layoutItems[i].id,
              name: layoutItems[i].aliasName ? layoutItems[i].aliasName : layoutItems[i].component.id ? allCompinfoObj[layoutItems[i].component.name].alias_name : '空布局块',
              componentId: layoutItems[i].component.id ? layoutItems[i].component.id : '',
              componentName: layoutItems[i].component.id ? layoutItems[i].component.name : '',
              active: false,
              show: true
            })
          }
        }
        // 处理已选状态
        if (this.carouselCompList) {
          this.waitingTarget.forEach(item => {
            for (let i=0; i<this.carouselCompList.length; i++) {
              if (item.id == this.carouselCompList[i].layoutItemId) {
                item.active = true
              }
            }
          })
        }
      },
      searchWaitingTarget () {
        this.waitingTarget.forEach(item => {
          if (item.name.indexOf(this.searchValue) > -1 || item.id.indexOf(this.searchValue) > -1) {
            item.show = true
          }else {
            item.show = false
          }
        })
      },
      openWaitingTargetDrawer () {
        this.waitingTargetDrawerVisible = !this.waitingTargetDrawerVisible;
        this.loadWaitingTarget()
      },
      waitingTargetDrawerCloseHandler () {
        this.waitingTarget = []
      },
      closeWaitingTargetDrawer () {
        this.waitingTargetDrawerVisible = !this.waitingTargetDrawerVisible;
        this.waitingTarget = []
      },

      itemMouseenterHandle (item) {
        this.$store.commit('designer/setCurrentHoverLayoutItemId', item.id)
      },
      itemMouseleaveHandle () {
        this.$store.commit('designer/setCurrentHoverLayoutItemId', '')
      },

      clearWaitingTargetSelected () {
        for (let i=0; i<this.waitingTarget.length; i++) {
          this.waitingTarget[i].active = false
        }
      },
      submitWaitingTargetSelected () {
        this.carouselCompList = [];
        for (let i=0; i<this.waitingTarget.length; i++) {
          if (this.waitingTarget[i].active) {
            this.carouselCompList.push({
              layoutItemId: this.waitingTarget[i].id,
              layoutItemName: this.waitingTarget[i].name,
              componentId: this.waitingTarget[i].componentId,
              componentName: this.waitingTarget[i].componentName
            })
          }
        }
        this.waitingTarget = [];
        this.waitingTargetDrawerVisible = !this.waitingTargetDrawerVisible
      }
    },
    computed: {
      ...mapFields({

        currentLayoutItemId: 'id',
        carouselCompList: 'component.compConfigData.carouselCompList',
        option: 'component.compConfigData.option'

      })
    }
  }
</script>

<style lang="less" scoped>
  .carousel-comp-list-item {
    padding: 10px;
    background-color: #424242;
    margin-bottom: 5px;
    cursor: move;
    border-radius: 4px;
    border: 1px solid #212121;
  }
  .waiting-target-panel {
    background-color: #424242;
    border-radius: 3px;
    padding: 7px;
    margin-bottom: 7px;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 5px #9e9e9e;
    }
    &.group-item-active {
      background-color: #fb8c00;
    }
    &.layout-item-active {
      background-color: #2196f3;
    }
    &.layout-item-panel {
      border: 1px solid #2196f3;
    }
    &.group-item-panel {
      border: 1px solid #fb8c00;
    }
    &.dashed-panel {
      border: 1px dashed #fafafa;
    }
    i {
      margin-top: 4px;
    }
  }
</style>
